<template>
	<view class="payment-status">
		<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
		<view class="iconfont icons icon-duihao2 bg-color" v-if="order_pay_info.paid || order_pay_info.payType == 'offline'"></view>
		<view class="iconfont icons icon-iconfontguanbi" v-else></view>
		<!-- 失败时：订单支付失败 -->
		<view class="status" v-if="order_pay_info.payType != 'offline'">{{ order_pay_info.paid ? '订单支付成功' : '订单支付失败' }}</view>
		<view class="status" v-else>订单提交成功</view>
		<view class="wrapper">
			<view class="item">
				<view class="store">
					<text class="red">请在24小时内</text>
					，联系以下店铺付款
				</view>
				<view class="store name">{{ order_pay_info.shop.name }}</view>
				<view class="store">地址：{{ order_pay_info.shop.address || '' }}</view>
				<view class="store">
					电话：
					<text class="phone" @click="call()">{{ order_pay_info.shop.telephone }}</text>
				</view>
				<view class="store">或添加该店铺客服微信咨询</view>
				<image class="qr-img" v-if="order_pay_info.shop.imageUrl" :src="order_pay_info.shop.imageUrl"></image>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>订单编号</view>
				<view class="itemCom">{{ order_pay_info.orderId }}</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>下单时间</view>
				<view class="itemCom">{{ order_pay_info.createTime ? order_pay_info.createTime : '-' }}</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>支付金额</view>
				<view class="itemCom">{{ order_pay_info.payPrice }}</view>
			</view>
			<!--失败时加上这个  -->
			<view class="item acea-row row-between-wrapper" v-if="order_pay_info.paid == 0 && order_pay_info.payType != 'offline'">
				<view>失败原因</view>
				<view class="itemCom">{{ status == 2 ? '取消支付' : msg }}</view>
			</view>
		</view>
		<view @tap="goOrderDetails"><button formType="submit" class="returnBnt bg-color" hover-class="none">查看订单</button></view>
		<button @tap="goIndex" class="returnBnt cart-color" formType="submit" hover-class="none">返回首页</button>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { getOrderDetail } from '@/api/order.js';
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
import { toLogin } from '@/libs/login.js';

export default {
	data() {
		return {
			orderId: '',
			order_pay_info: {
				paid: 1,
				_status: {}
			},
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			status: 0,
			msg: ''
		};
	},
	computed: mapGetters(['isLogin']),
	onLoad: function(options) {
		if (!options.order_id)
			return this.$util.Tips(
				{
					title: '缺少参数无法查看订单支付状态'
				},
				{
					tab: 3,
					url: 1
				}
			);
		this.orderId = options.order_id;
		this.status = options.status || 0;
		this.msg = options.msg || '';
		if (this.isLogin) {
			this.getOrderPayInfo();
		} else {
			this.isAuto = true;
			this.$set(this, 'isShowAuth', true);
		}
	},
	methods: {
		/**
		 * 拨打电话
		 */
		call: function() {
			uni.makePhoneCall({
				phoneNumber: this.order_pay_info.shop.telephone
			});
		},
		/**
		 *
		 * 支付完成查询支付状态
		 *
		 */
		getOrderPayInfo: function() {
			let that = this;
			uni.showLoading({
				title: '正在加载中'
			});
			getOrderDetail(that.orderId)
				.then(res => {
					uni.hideLoading();
					that.$set(that, 'order_pay_info', res.data);
					uni.setNavigationBarTitle({
						title: '提交成功'
					});
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		/**
		 * 去首页关闭当前所有页面
		 */
		goIndex: function(e) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		/**
		 *
		 * 去订单详情页面
		 */
		goOrderDetails: function(e) {
			let that = this;
			uni.showLoading({
				title: '正在加载'
			});
			openOrderSubscribe()
				.then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: '/pages/order_details/index?order_id=' + that.orderId
					});
				})
				.catch(() => {
					nui.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.icon-iconfontguanbi {
	background-color: #999 !important;
	text-shadow: none !important;
}
.payment-status {
	background-color: #fff;
	margin: 120rpx 30rpx 0 30rpx;
	border-radius: 10rpx;
	padding: 1rpx 0 28rpx 0;
}
.payment-status .icons {
	font-size: 70rpx;
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 140rpx;
	text-shadow: 0px 4px 0px #df1e14;
	border: 6rpx solid #f5f5f5;
	margin: -76rpx auto 0 auto;
	background-color: #999;
}

.payment-status .iconfont {
	font-size: 70rpx;
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 140rpx;
	text-shadow: 0px 4px 0px #df1e14;
	border: 6rpx solid #f5f5f5;
	margin: -76rpx auto 0 auto;
	background-color: #999;
}

.payment-status .iconfont.fail {
	text-shadow: 0px 4px 0px #7a7a7a;
}

.payment-status .status {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin: 25rpx 0 37rpx 0;
}

.payment-status .wrapper {
	border: 1rpx solid #eee;
	margin: 0 30rpx 47rpx 30rpx;
	padding: 35rpx 0;
	border-left: 0;
	border-right: 0;
}

.payment-status .wrapper .item {
	font-size: 28rpx;
	color: #282828;
}

.payment-status .wrapper .item .store {
	margin-top: 10rpx;

	.red {
		color: red;
	}
	&.name {
		font-size: 32rpx;
		font-weight: bold;
	}
	.phone {
		color: #2196f3;
	}
}

.payment-status .wrapper .item .qr-img {
	display: block;
	margin: 0 auto;
	width: 180px;
	height: 180px;
}

.payment-status .wrapper .item ~ .item {
	margin-top: 20rpx;
}

.payment-status .wrapper .item .itemCom {
	color: #666;
}

.payment-status .returnBnt {
	width: 630rpx;
	height: 86rpx;
	border-radius: 50rpx;
	color: #fff;
	font-size: 30rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 0 auto 20rpx auto;
}
</style>
